<script setup lang="ts">
import { MAPBOX_TOKEN, mapboxFontUrl, mapboxSpriteUrl } from 'common/src/utils/const';
import { GeoJSONFeature, Map as MapboxMap, MapMouseEvent, ScaleControl, StyleSpecification } from 'mapbox-gl';
import {
  editShipRouteLayer, editShipRouteSource, editShipRouteSrcId, graylandLayer, graylandSource, grayLandSrcId,
  i4Layer, i4Source, i4SrcId, landDetailLayer, landDetailSource, landDetailSrcId, shipAttitudeLayer,
  shipAttitudeSource, shipAttitudeSrcId, shipRouteLayerId, shipRoutePointLayer, shipRoutePointLayerId,
  shipRoutePointSource, shipRoutePointSrcId, shipRouteSource, shipRouteSrcId, updateExerciseSrc,
  exerciseAreaSrcId, exerciseSource,
  exerciseAreaLayer,
  exerciseAreaLineLayer,
  exerciseAreaTextLayer,
  // 其余七类区域（3~9）
  fishAreaSrcId, fishAreaSource, fishAreaLayer, fishAreaLineLayer, fishAreaTextLayer,
  buoyAreaSrcId, buoyAreaSource, buoyAreaLayer, buoyAreaLineLayer, buoyAreaTextLayer,
  wreckAreaSrcId, wreckAreaSource, wreckAreaLayer, wreckAreaLineLayer, wreckAreaTextLayer,
  derrickAreaSrcId, derrickAreaSource, derrickAreaLayer, derrickAreaLineLayer, derrickAreaTextLayer,
  seaCableAreaSrcId, seaCableAreaSource, seaCableAreaLayer, seaCableAreaLineLayer, seaCableAreaTextLayer,
  uxoAreaSrcId, uxoAreaSource, uxoAreaLayer, uxoAreaLineLayer, uxoAreaTextLayer,
  trainingAreaSrcId, trainingAreaSource, trainingAreaLayer, trainingAreaLineLayer, trainingAreaTextLayer,
  taskRegionLayer,
  taskRegionSrcId,
  taskRegionSource,
  taskRegionPointLayer,
  taskRegionRouteLayer,
  taskRegionRouteSrcId,
  taskRegionPointSrcId,
  taskRegionRouteSource,
  taskRegionPointSource,
  taskRegionPointLayerId,
  wxMessageLayer,
  wxMessageLineLayer,
  wxMessageTextLayer,
  wxMessageSrcId,
  wxMessageSource,
  updateWxMessageSrc,
} from 'common/src/utils/layer';
import BaseMap from 'common/src/components/BaseMap.vue';
import TopLeft from './topLeft/index.vue';
import Right from './right/index.vue';
import Bottom from './bottom/index.vue';
import { useTaskStore, useTimeRangeStore, useWeatherStore,useUserStore } from '@/store';
import {
  measurePointSrcId,
  measurePointSource,
  measureLineSrcId,
  measureLineSource,
  measureLineUnconfirmedSrcId,
  measureLineUnconfirmedSource,
  measurePointLayer,
  measureLineLayer,
  measureLineUnconfirmedLayer,
} from 'common/src/utils/measureDistance';
import {
  drawPolygonPointSrcId,
  drawPolygonLineSrcId,
  regionFillSrcId,
  regionPointSource,
  regionLineSource,
  regionFillSource,
  regionPointLayer,
  regionFillLayer,
  regionLineLayer,
} from 'common/src/utils/drawPolygon';

const weatherStore = useWeatherStore();
const taskStore = useTaskStore();
const userStore = useUserStore();
const timeRangeStore = useTimeRangeStore();
const topLeftRef = ref<InstanceType<typeof TopLeft> | null>(null);

/** 处理好本地mapbox style参数 */
const getStyle = async () => {
  return {
    version: 8,
    name: 'Mapbox Streets',
    // sprite: mapboxSpriteUrl,
    glyphs: mapboxFontUrl,
    sources: {
      [i4SrcId]: i4Source,
      [grayLandSrcId]: graylandSource,
      [landDetailSrcId]: landDetailSource,
      // 已保存航线-线
      [shipRouteSrcId]: shipRouteSource,
      [shipRoutePointSrcId]: shipRoutePointSource,
      // 编辑航线
      [editShipRouteSrcId]: editShipRouteSource,
      // 航线姿态
      [shipAttitudeSrcId]: shipAttitudeSource,
      [measurePointSrcId]: measurePointSource,
      [measureLineSrcId]: measureLineSource,
      [measureLineUnconfirmedSrcId]: measureLineUnconfirmedSource,
      [drawPolygonPointSrcId]: regionPointSource,
      [drawPolygonLineSrcId]: regionLineSource,
      [regionFillSrcId]: regionFillSource,
      [exerciseAreaSrcId]: exerciseSource,
      [fishAreaSrcId]: fishAreaSource,
      [buoyAreaSrcId]: buoyAreaSource,
      [wreckAreaSrcId]: wreckAreaSource,
      [derrickAreaSrcId]: derrickAreaSource,
      [seaCableAreaSrcId]: seaCableAreaSource,
      [uxoAreaSrcId]: uxoAreaSource,
      [trainingAreaSrcId]: trainingAreaSource,
      [taskRegionSrcId]: taskRegionSource,
      [taskRegionRouteSrcId]: taskRegionRouteSource,
      [taskRegionPointSrcId]: taskRegionPointSource,
      [wxMessageSrcId]: wxMessageSource,
    },
    layers: [
      {
        id: 'background',
        type: 'background',
        layout: {},
        paint: {
          'background-color': '#AAC6EE',
        },
      },
      {
        ...i4Layer,
        layout: {
          // visibility: 'none'
        },
        paint: {
        },
      },
      graylandLayer,
      landDetailLayer,
      exerciseAreaLayer,
      fishAreaLayer,
      buoyAreaLayer,
      wreckAreaLayer,
      derrickAreaLayer,
      seaCableAreaLayer,
      uxoAreaLayer,
      trainingAreaLayer,
      wxMessageLayer,
      regionFillLayer,
      exerciseAreaLineLayer,
      fishAreaLineLayer,
      buoyAreaLineLayer,
      wreckAreaLineLayer,
      derrickAreaLineLayer,
      seaCableAreaLineLayer,
      uxoAreaLineLayer,
      trainingAreaLineLayer,
      wxMessageLineLayer,
      regionLineLayer,
      // 保存的预测航线
      {
        id: shipRouteLayerId,
        type: 'line',
        source: shipRouteSrcId,
        minzoom: 0,
        layout: {
          'line-join': 'round',
          'line-cap': 'butt'
        },
        paint: {
          'line-color': ['case', ['has', 'color'], ['get', 'color'], '#00f900'],
          'line-width': 8,
          'line-border-color': ['case', ['has', 'border-color'], ['get', 'border-color'], '#fff'],
          // 'line-border-color':'#fff',
          'line-border-width': 2,
        },
      },
      taskRegionRouteLayer,
      editShipRouteLayer,
      shipAttitudeLayer,
      taskRegionLayer,
      measureLineLayer,
      measureLineUnconfirmedLayer,
      regionPointLayer,
      measurePointLayer,
      shipRoutePointLayer,
      taskRegionPointLayer,
      exerciseAreaTextLayer,
      fishAreaTextLayer,
      buoyAreaTextLayer,
      wreckAreaTextLayer,
      derrickAreaTextLayer,
      seaCableAreaTextLayer,
      uxoAreaTextLayer,
      trainingAreaTextLayer,
      wxMessageTextLayer,
    ],
  } as StyleSpecification;
};

/** mapbox加载完成后的图层初始化 */
const onMapboxLoaded = (mapboxMap: MapboxMap) => {
  weatherStore.initWeatherLayer(mapboxMap);
  taskStore.showTaskRoutePoint();
  taskStore.getList();
  const scale = new ScaleControl({
    maxWidth: 80,
    unit: 'nautical',
  });
  mapboxMap.addControl(scale);
  scale.setUnit('nautical');
  mapboxMap.getCanvas().style.cursor = 'default';
  mapboxMap.on('click', [shipRoutePointLayerId, taskRegionPointLayerId], topLeftRef.value?.handleRoutePointClick!);
  let cursor = '';
  mapboxMap.on('mouseenter', [shipRoutePointLayerId, taskRegionPointLayerId], () => {
    cursor = mapboxMap.getCanvas().style.cursor;
    mapboxMap.getCanvas().style.cursor = 'pointer';
  });
  mapboxMap.on('mouseleave', [shipRoutePointLayerId, taskRegionPointLayerId], () => {
    mapboxMap.getCanvas().style.cursor = cursor;
  });
  updateExerciseSrc(mapboxMap, timeRangeStore.start, timeRangeStore.end);
  updateWxMessageSrc(mapboxMap);
};

onMounted(() => {
});
</script>

<template>
  <div class="home-container">
    <BaseMap
      :mapbox-access-token="MAPBOX_TOKEN"
      :get-style="getStyle"
      :on-mapbox-loaded="onMapboxLoaded"
      :init-mapbox-options="{
        center: [68, 23],
        zoom: 1.5,
      }"
      :style="{
        height: '100%',
        width: 'unset',
      }"
    />
    <TopLeft ref="topLeftRef" />
    <Right v-if="userStore.taskPhase === 5 || taskStore.currentTaskId" />
    <Bottom />
  </div>
</template>

<style lang="less" scoped>
.home-container {
  position: relative;
  height: calc(100vh - 35px);
}
</style>
